<template>
  <div class="anime-page">
    <nav-unit />
    <div class="center-content">
      <div class="anime-timetable">
        <h2>新番时间表</h2>
        <p class="tips">国内看建议等一天</p>
        <el-divider />
        <anime-day v-for="(day,index) in week" :key="index" :day="day" />
      </div>
      <div class="classic-anime">
        <h2>经典番剧</h2>
        <div class="anime-card" v-for="(anime,index) in classic" :key="index">
          <a :href="`https://www.bilibili.com/bangumi/media/md${anime.id}/`" target="_blank">
            <el-image :src="require(`@/assets/ClassicAnime/${anime.url}.png`)" fit="cover"></el-image>
          </a>
          <h5><a :href="`https://www.bilibili.com/bangumi/media/md${anime.id}/`" target="_blank">{{anime.title}}</a></h5>
        </div>
      </div>
    </div>
    <footer-unit />
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import AnimeDay from '@/components/Anime/AnimeDay.vue'
import FooterUnit from '@/components/Footer/FooterUnit.vue'

export default {
  name: 'AnimePage',
  components: {
    NavUnit,
    AnimeDay,
    FooterUnit
  },
  setup() {
    let week = [
      {
        name: '周日',
        logo: 'saber',
        backgroud: 'SaberCard',
        animes: [
          {title: 'Love Live! SuperStar!!\n第二季', id: 6188, url: 'LoveLive'}
        ]
      },
      {
        name: '周一',
        logo: 'archer',
        backgroud: 'ArcherCard',
        animes: [
          {title: '欢迎来到实力至上主义教室\n第二季', id: 6192, url: 'shilizhishang'}
        ]
      },
      {
        name: '周二',
        logo: 'lancer',
        backgroud: 'LancerCard',
        animes: [
          {title: 'OVERLORD 第四季', id: 5955, url: 'OverLord'}
        ]
      },
      {
        name: '周三',
        logo: 'berserker',
        backgroud: 'BerserkerCard',
        animes: [
          {title: '继母的拖油瓶是我的前女友', id: 5962, url: 'jimu'},
          {title: '绽放的阿尔斯诺特利亚', id: 5964, url: 'aersinuoteliya'}
        ]
      },
      {
        name: '周四',
        logo: 'rider',
        backgroud: 'RiderCard',
        animes: [
          {title: '夏日重现', id: 6002, url: 'xiarichongxian'}
        ]
      },
      {
        name: '周五',
        logo: 'caster',
        backgroud: 'CasterCard',
        animes: [
          {title: '天籁人偶', id: 5973, url: 'tianlairenou'},
          {title: '在地下城寻求邂逅是否搞错了什么 第四季', id: 6190, url: 'dicuo'}
        ]
      },
      {
        name: '周六',
        logo: 'assassin',
        backgroud: 'AssassinCard',
        animes: [
          {title: 'Engage Kiss', id: 5986, url: 'EngageKiss'},
          {title: 'Lycoris Recoil', id: 5981, url: 'LycorisRecoil'}
        ]
      }
    ]
    let classic = [
      {title: '凉宫春日的忧郁', id: 24120616, url: 'haruhi'},
      {title: '某科学的超电磁炮', id: 425, url: 'railgun'},
      {title: 'Fate Stay Night Unlimited Blade Works', id: 1586, url: 'FateStayNight'},
      {title: 'Re: 从零开始的异世界生活', id: 28224394, url: 'RE-zero'}
    ]

    return {
      week,
      classic
    }
  }
}
</script>

<style scoped>
  .anime-timetable {
    width: 800px;
    overflow: hidden;
    cursor: default;
  }
  .center-content {
    display: flex;
    justify-content: space-between;
  }
  h2 {
    text-align: center;
    margin: 10px 0;
    color: #409EFF;
  }
  h5 {
    width: fit-content;
    margin: 5px auto;
    text-align: center;
  }
  .tips {
    text-align: center;
    font-size: 12px;
    color: #909399;
  }
  .classic-anime {
    padding: 0 25px;
    cursor: default;
  }
  a {
    color: black;
    text-decoration: none;
  }
  a:hover {
    color: skyblue;
  }
</style>